<template>
  <div class="serviceSearch">
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline searchForm"
      ref="formData"
      style="width:100%"
    >
      <el-form-item>
        <el-input v-model="formData.sername" placeholder="开服名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.gameId" filterable placeholder="输入游戏名搜索">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.gameName"
            :value="item.id"
            style="width:300px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formData.serviceTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-top:6px"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="dataSearch" @click="dataSearch(formData)">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="addNewgame" type="primary" @click="addservice()">添加开服信息</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          accept=".xlsx"
          :action="action"
          :data="data"
          multiple
          :limit="1"
          name="excel"
          :before-upload="beforeUpload"
          :on-success="handlesuccess"
          :on-error="handleError"
          ref="upload"
        >
          <el-button size="small" type="primary">导入开服表</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button class="downtemplate" type="text" @click="downtemplate()">下载模板</el-button>
        <el-button circle class="iconAlert" @click="gameMatter">?</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOptionList } from "@/api/gameManage";
import { exportExcel } from "@/api/openService";
export default {
  data() {
    return {
      formData: {
        sername: "",
        gameId: "",
        serviceTime: [],
        page: 1,
        limit: 20,
      },
      options: [],
      loading: false,
      // action: "/api/Gameserver/import",
      action: "https://cpop.zaoyx.com/api/v1/adminrebate/Gameserver/import",
      data: {
        fileType: "xlsx",
      },
    };
  },
  mounted() {
    getOptionList().then((res) => {
      this.options = res.data.list;
    });
  },
  methods: {
    // 查询
    dataSearch() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          const startTime =
            this.formData.serviceTime == null ||
            this.formData.serviceTime.length == 0
              ? ""
              : this.formData.serviceTime[0];
          const endTime =
            this.formData.serviceTime == null ||
            this.formData.serviceTime.length == 0
              ? ""
              : this.formData.serviceTime[1];
          const obj = {
            sername: this.formData.sername,
            gameId: this.formData.gameId,
            startTime,
            endTime,
            page: 1,
            limit: 20,
          };
          this.$store.commit("SET_SEARCH", obj);
          this.$emit("searchList", obj);
        }
      });
    },
    addservice() {
      this.$emit("showaddserviceDialog");
    },
    gameMatter() {
      this.$alert(
        "该下载文件为Excel模板，供进行开服信息批量导入使用。<br>为保证正常导入，请严格按照此表格中的字符格式进行编辑，使用时请删除表格中的说明性文字与公式只保留数据进行导入。导入数据每行不要有空行，若表格中进行了删除操作，请清除空白格中的格式以防止上传数据错误。<br><span style='color:#f00;'>导入表格文件名必须是：serverTemplate.xlsx，否则会校验失败</span>",
        "导入开服表注意事项",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    beforeUpload(file) {
      const name = file.name;
      const isZip = file.name.endsWith(".xlsx");
      if (!isZip) {
        this.$message.error("请选择xlsx文件");
      }
      if (name != "serverTemplate.xlsx") {
        this.$message.error("导入文件名称错误");
      }
      return isZip && name;
    },
    handlesuccess(response, file, fileList) {
      this.$refs["upload"].clearFiles();
      if (response.code != 200) {
        this.$message.error(response.msg);
      } else {
        this.$message.success(response.msg);
        this.$emit("showExcel");
      }
    },
    handleError(err, file, fileList) {
      this.$message.error(err);
    },
    downtemplate() {
      let url = "https://static-inc.zaoyx.com/public/serverTemplate.xlsx";
      window.open(url);
    },
  },
};
</script>
<style lang="scss" scoped>
.serviceSearch {
  margin-left: 20px;
  .upload-demo {
    // margin-bottom: -12px;
  }
  .iconAlert {
    padding: 0;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    color: #fb4665;
    border: 1px solid #fb4665;
    font-size: 7px;
    margin-left: 0px;
  }
  .downtemplate {
    font-size: 13px;
    padding: 0;
    // margin-left: 15px;
  }
  .searchForm {
    display: flex;
    align-items: center;
  }

  .el-input {
    width: 175px;
  }

  .file {
    position: relative;
    background: #409eff;
    border: 1px solid #409eff;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    width: 108px;
    height: 33px;
    box-sizing: border-box;
    font-size: 13px;
    text-align: center;
    margin-bottom: -5px;
  }
  .file input {
    position: absolute;
    font-size: 13px;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    opacity: 0;
  }

  .addNewgame,
  .dataSearch {
    padding: 0 15px;
    height: 32px;
    font-size: 13px;
  }
  .dataSearch {
    // margin-right: 30px;
  }
  .addNewgame {
    // margin-left: 20px;
  }
}
.el-form-item {
  margin-bottom: 0;
}
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-select-dropdown__item {
  white-space: normal;
  height: auto;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 250px;
}
</style>